<script setup>

</script>

<!-- 帖子发布页面(个人中心-稿件管理-发布文章) -->

<template>
<div>
  <h1 style="color: orange">发布页面</h1>
  <el-form label-width="80px">
    <el-form-item label="文章标题">
      <el-input placeholder="请输入文章标题" v-model="content.title"/>
    </el-form-item>
    <el-form-item label="文章分类">
      <el-radio-group v-model="content.type" @input="selectItemChange()">
        <el-radio-button  v-for="type in typeArr" label="type.id">{{type.name}}</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="content.categoryId" placeholder="请选择">
        <el-option label="面包" value="1"></el-option>
        <el-option label="小食" value="2"></el-option>
        <el-option label="家常菜" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="封面">
      <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          name="file"
          :limit="1"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>

    <el-form-item label="文章内容">
      <div id="content_div">
      </div>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="post()">{{content.id==null?'发布':'修改'}}</el-button>
    </el-form-item>

  </el-form>
</div>
</template>

<script>
export default {
  name: "PersonalPostView",
  data(){
    return{
      content:{title: '',type: '1',categoryId: ""},
      dialogImageUrl: '',
      dialogVisible: false,
      typeArr: [],  //一级文章分类数组
      categoryArr: []  //二级文章分类数组
    }
  },
  methods:{
    post(){
      //content.imgUrl是文章封面
      if(this.content.imgUrl==null){
        this.$message.error("请选择封面!");
        return;
      }
      if(this.content.title.trim()==""){
        this.$message.error("标题不能为空");
        return;
      }
      if(this.content.type!=5){//类型不是视频(视频的类型为5)
        //把富文本编辑器里面的内容取出
        this.content.content=this.editor.txt.html();
        //设置摘要  从文章的文本内容中截取前50个字符作为摘要
        this.content.brief=this.editor.txt.text().slice(0,50);
      }else{
        if(this.content.videoUrl==null){
          this.$message.error("请选择视频文件!");
          return;
        }
      }
      let user=localStorage.user?JSON.parse(localStorage.user): null;
      if(user!=null){
        alert("请先登录!");
        this.$router.push('/login');
        return;
      }
      this.content.createBy=user.id;
      //将c对象转成查询字符串格式
      let articleStr=this.qs.stringify(this.content);//////////////////controller中的content的add-new后端代码还没有写
      //发请求把文章想的数据提交到服务器
      this.axios.post(this.BASE_URL+'/contents/add-new',data).then((response)=>{
        if(response.data.code==1){
          if(this.content.id==null){//文章id还没分配，证明是新发布的文章
            this.$message.success("发布完成!");
            //发布完成,跳转到稿件管理页面
            this.$router.push('/personal/management');
          }else{//否则就是修改文章
            this.$message.success("修改完成");
            if(localStorage.editPageFrom=='admin'){
              //跳转到系统后台页面
              this.$router.push('/admin/content');
              localStorage.editPageFrom=null;//从localStorage清空修改文章的人
            }else{
              //如果不是管理员，则跳转到个人中心的稿件管理页面
              this.$router.push('/personal/management');
            }
          }
        }
      });

    },
    //上传成功将文件路径存储在data中的content对象中，作为文章封面。
    handleSuccess(response,file,fileList){
      //response等同于JsonResult    response.data是图片路径
      //判断上传的文件是图片还是视频
      if(file.raw.type.includes("image")){//图片
        this.content.imgUrl=response.data;
      }else{//视频
        this.content.videoUrl=response.data;
      }
    },
    //通过一级分类的id查询对应的二级分类数据，存入到二级分类数组categoryArr
    loadSubCategories(){
      this.axios.get(this.BASE_URL+'/categories/'+this.content.type+"/sub").then((response)=>{
        if(response.data.code==1){
          //把请求回来的数据赋值给二级分类的数组
          this.categoryArr=response.data.data;
        }
      });
    },
    //如果一级分类改变，用此函数重新加载二级分类数据
    selectItemChange(){
      this.content.categoryId="";//把记录的二级分类id去掉 因为此时一级分类已经改变
      this.loadSubCategories();//重新根据一级文章分类加载二级分类
    },
    //删除文章对应的图片或视频(清空路径，并删除后端对应的数据)
    handleRemove(file, fileList) {
      //判断删除的是图片还是视频(将data中的content对象对应的要删除的文件路径置为null)
      if(file.raw.type.includes('image')){
        this.content.imgUrl=null;
      }else{
        this.content.videoUrl=null;
      }

      this.axios.post(this.BASE_URL+'/removeUploadFile?url='+file.response.data).then((response)=>{
        if(response.data.code==1){
          this.$message.success("删除成功!");
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted() {
    this.loadSubCategories();
    //页面元素加载完成并且Vve框架和元素挂载完成后调用的方法
    //通常在此处做一些初始化操作，比如富文本编辑器初始化，或者发请求的代码
    //初始化富文本编辑器
    this.editor=new this.wangEditor("#content_div");//#content_div用来显示富文本编辑器的位置
    this.editor.create();

    //请求一级分类的数据
    this.axios.get(this.BASE_URL+'/categories/type-list').then((res)=>{
      if(res.data.code==1){
        this.typeArr=res.data.data;
      }
    });
  }

}
</script>

<style scoped>

</style>